<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>马钢股份组织绩效</title>
    <link href="../static/css/todostyle.css" rel="stylesheet" th:href="@{/css/todostyle.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}"/>
    <link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.css}"/>
    <link rel="stylesheet"
          th:href="@{/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.css}"/>
    <link rel="stylesheet" th:href="@{/css/animate.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/ajax/libs/select/select2.css}"/>
    <link rel="stylesheet" th:href="@{/ruoyi/css/ry-ui.css}"/>
    <style>

    </style>
</head>
<body>
<div class="Top_mg"><!-- <img src="/img/todologo.png"/><h3>马钢股份组织绩效</h3>--></div>
<!-- <div class="col-sm-12">
        <ul class="nav nav-pills nav-justified step step-arrow jdt">
            <li th:each="approver:${approverList}" th:class="${approver.approverStatus!='0'}?'dwc':'' "><a th:text="${approver.approverStatus!='0'}? ${approver.approverCode}+'（待评价）':${approver.approverCode}+'（已评价）' "></a></li>

        </ul>
    </div> -->
<div class="evaluate">
    <div class="evaluate_a row ">
        <input id="notTitle" th:value="${pefassproject.noticeTitle}" type="hidden"/>
        <input id="notValue" th:value="${pefassproject.noticeValue}" type="hidden"/>
        <input id="typeYB" th:value="${type}" type="hidden"/>
        <div aria-hidden="true" class="modal inmodal fade" id="tips_a"
             role="dialog" style="display: none;" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 th:text="${pefassproject.noticeTitle}"></h3>
                    </div>
                    <div class="modal-body">
                        <p id="noticeValue" style="white-space:pre-line;padding:17px 35px;"></p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-white" data-dismiss="modal" type="button">好的，知道了</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="tou tou2"><i class="glyphicon glyphicon-list-alt" id="hei"></i>&nbsp;&nbsp;&nbsp;&nbsp;<h2
                    th:text="${pefassproject.projectName}"></h2>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <i class="fa fa-clock-o"></i>&nbsp;&nbsp;<span
                        th:text="${#dates.format(pefassproject.assessTimeFrom, 'yyyy-MM-dd')}"></span>····<span
                        th:text="${#dates.format(pefassproject.assessTimeTo, 'yyyy-MM-dd')}"></span>
                <div class="sy" th:if="${days>=0}">剩余<span th:text="${days}"></span>天</div>
                <div class="sy" th:if="${days<0}"><span>已过期</span></div>
            </div>
        </div>
        <input id="objId" th:value="${pefassobject.id}" type="hidden"/>
        <ul class="ul1">
            <li><span class="spans">评价单位：</span><span th:text="${pefctasstable.memberName}"></span></li>
            <li><span class="spans">绩效模板：</span><span th:text="${pefassproject.projectName}"></span></li>
        </ul>
        <ul class="ul2">
            <li><span class="spans">展现形式：</span><span th:text="${pefassproject.showtype}"></span></li>
            <li><span class="spans">考核周期：</span><span
                    th:text="${@dict.getLabel('zzjx_pefindicator_checkcyc', pefassproject.cycleValue)}"></span></li>
        </ul>

    </div>
    <form class="form-horizontal m" id="form-kaoping">
        <input id="id" name="id" th:value="${approver.id}" type="hidden">
        <input id="roleId" name="roleId" th:value="${roleId}" type="hidden"><!-- 待办人员角色 -->
        <input id="tableId" name="tableId" th:value="${approver.tableId}" type="hidden">
        <input id="approveorder" name="approveorder" th:value="${approver.approveorder}" type="hidden">
    </form>

    <div class="evaluate_c table2excel table-responsive" id="tableDiv" style="width: 98%;padding-left:2%;">
        <table class="" data-mobile-responsive="true" id="table">
            <!-- 在此处填充表格数据 -->
        </table>
    </div>
    <div class="evaluate_b_but" style="margin: 20px 0 50px 0;text-align: center;">
        <div style="float: left;width:30%;">
            <button onclick="loadFiles('A')"
                    th:style="${deptparamRole.isCheck=='Y'}?'display:inline;width:auto;':'display:none;width:auto;'" th:text="${pefassobject.myRemark!=null}?'查看'+${pefassobject.myRemark}:'查看附件'"
                    type="button"><i
                    class="fa fa-search"></i></button>
            <button onclick="loadFiles('B')"
                    th:style="${deptparamRole.isCheck=='Y'}?'display:inline;width:auto;':'display:none;width:auto;'" th:text="${pefassobject.otherRemark!=null}?'查看'+${pefassobject.otherRemark}:'查看附件'"
                    type="button"><i
                    class="fa fa-search"></i></button>
            <button onclick="uploadFiles('B')"
                    th:style="${deptparamRole.isUpload=='Y'}?'display:inline;width:auto;':'display:none;width:auto;'" th:text="${pefassobject.otherRemark!=null}?'上传'+${pefassobject.otherRemark}:'上传附件'"
                    type="button"><i
                    class="fa fa-upload"></i></button>
            <input id="isUpload" th:value="${deptparamRole.isUpload}" type="hidden"/>
        </div>
        <button onclick="doSubmit('BC')" th:if="${type!=1}">保存</button>
        <button onclick="doSubmit('TJ')" th:if="${type!=1}">提交</button>
        <button onclick="appealfun()" th:if="${type==1}">申诉</button>
        <button onclick="closeItem()">取消</button>
        <!--<button onclick="getDate()">得到数据</button>
        <button onclick="getTableTh()">得到表头数据</button>-->
    </div>
    <div id="xq">
        鼠标悬浮显示详情框
    </div>
</div>
<div th:include="include :: footer"></div>

<script th:src="@{/ajax/libs/bootstrap-table/extensions/export/export.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/export/xlsx.full.min.js}"></script>
<script th:src="@{/ajax/libs/table2excel/jquery.table2excel.js}"></script>
<script charset="UTF-8" th:src="@{/js/rule.js}" type="text/javascript"></script>
<!-- jquery-validate 表单验证插件 -->
<script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script th:src="@{/ajax/libs/validate/jquery.validate.extend.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "zzjx/pefctasstable";
    $(function () {
        var tipsTitle = $("#notTitle").val();
        var tipsValue = $("#notValue").val();
        if (tipsTitle != "" && tipsTitle != null && tipsValue != "" && tipsValue != null) {
            $("#noticeValue").html(tipsValue.replace(/<br>/g, ""));
            $("#tips_a").modal("show");
            setTimeout(function () {
                $("#tips_a").modal("hide");
            }, 15000);
        }

        doChange(); //初始化表格信息
        $.modal.closeLoading();
    })


    function bding() {
        $("td").mouseover(function (e) {
            var a = $(this).html();
            if (a.indexOf("<input") != -1 || a.indexOf("<select") != -1 || a.indexOf("<textarea") != -1 || a.length < 7) {
                return;
            }
            $("#xq").html(a);
            $("#xq").css({"position": "absolute", "top": e.pageY + 15, "left": e.pageX - 75}).show();
        });
        $("td").mousemove(function (e) {
            $("#xq").css({
                "position": "absolute",
                "opacity": "0.7",
                "background-color": "666",
                "top": e.pageY + 15,
                "left": e.pageX - 75
            });
        });
        $("td").mouseout(function () {
            $("#xq").hide();
        });
    }

    function doSubmit(submitType) {
        var data = $("#form-kaoping").serializeArray();
        data.push({"name": "submitType", "value": submitType});
        data.push({"name": "tableDataJson", "value": JSON.stringify($("#table").bootstrapTable('getData'))});
        if (submitType == "TJ") {
            if (!$.rule.checkTableRequired()) {
                $.modal.alertError("请将信息填写完整后提交!");
                return;
            }
        }
        $.operate.saveTab(ctx + "zzjx/approver/doSubmit", data);
    }

    var formulaMap = null; //公式
    var dictData = null;	//表头 rule.js需要用到这两个，一定要声明为全局变量
    /**
     * 初始化表格信息
     */
    function doChange() {
        var id = $("#id").val();
        var tableId = $("#tableId").val(); //表单id
        if (tableId != "") {
            $.modal.loading("请等待加载预览信息!");
            $.ajax({
                url: ctx + "zzjx/pefctasstable/preview"
                , data: {"tableId": tableId, "id": id, "time": (new Date()).getTime()}
                , dataType: "JSON"
                , type: "GET"
                , async: false
                , success: function (result) {
                    $.table.destroy("table");
                    dictData = result.dictData;
                    var list = result.list;
                    formulaMap = result.formulaMap;
                    buildTable($('#table'), dictData.length, list.length, dictData, list);
                    $.modal.closeLoading();
                }, error: function () {
                    $.modal.closeLoading();
                    $.modal.alertError("获取预览信息失败!");
                }
            })
            $("#tableDiv").removeClass("hidden");
            return false;
        }
        $("#tableDiv").addClass("hidden");
    }


    /**
     * 构建预览信息表格
     * @param $el        table对象
     * @param cells        列数
     * @param rows        行数
     * @param dictData    表头数据
     * @param list        行数据
     */
    function buildTable($el, cells, rows, dictData, list) {
        var i, j, row, columns = [], data = [];
        var roleId = $("#roleId").val();
        var isDisabled = false;
        if ($("#typeYB").val() == 1) {
            isDisabled = true;
        }
        columns.push({
            field: "id",
            title: "ID",
            visible: false
        })
        //拼接table,拼接表头
        for (var dd in dictData) {
            var dictLabel = dictData[dd]["dictLabel"];//显示名称
            var dictValue = dictData[dd]["dictValue"];//字段值
            var listClass = dictData[dd]["listClass"];//列显示类型(输入框，下拉框，显示)
            var isMustFill = dictData[dd]["isMustFill"];//是否为空
            var fillRoleIds = dictData[dd]["fillRoleIds"];//可评角色ID
            var f = {
                field: dictValue,
                title: dictLabel,
                sortable: false
            }

            /* if (dictValue.slice(0,6) == "target" || dictValue.substr(-3,3) == "Get" || dictValue.substr(-8,8) == "Complete") {
                f = updateRow(dictValue,dictLabel,listClass);
            } */
            var opt = {
                dictLabel: dictLabel,	//必填
                dictValue: dictValue,	//必填
                tableId: "table",		//必填
                ruleId: listClass,		//必填
                align: "center",
                halign: "center",
                roleId: roleId,			//必填
                isMustFill: isMustFill,	//必填
                isDisabled: isDisabled,
                fillRoleIds: fillRoleIds,//必填
                formId: "formTable",		//必填
            };
            f = $.rule.fmRule(opt);
            if ("checkcyc" == dictValue) {//考核周期
                f = {
                    field: dictValue,
                    title: dictLabel,
                    sortable: false,
                    align: "center",
                    formatter: function (value, row, index) {
                        return value == null ? "-" : $.table.selectDictLabel([[${@dict.getType('zzjx_pefindicator_checkcyc')}]], value);
                    }
                }
            }
            if ("indPercents" == dictValue) {//权重
                f = {
                    field: dictValue,
                    title: dictLabel,
                    sortable: false,
                    visible: true,
                    align: "center",
                    formatter: function (value, row, index) {
                        return value == null || value == "" ? 0 + "%" : value + "%";
                    }
                }
            }
            columns.push(f);
        }


        columns.push(
            {
                field: "scoringMethod",
                title: "公式ID",
                visible: false,
            }
        );

        //构建表格
        $el.bootstrapTable('destroy').bootstrapTable({
            columns: columns,
            data: list,
            search: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            showExport: false,                     //是否显示导出
            exportDataType: "basic",              //basic', 'all', 'selected'.
            height: 600,
            pagination: false,
            modalName: "考核指标",
            onPostBody: function (data) {
                bding();
            }
        });
    }

    /**
     * 格式化当前列的显示类型
     * @param dictValue field
     * @param dictLabel    显示名称
     * @param listClass 显示类型
     */
    function updateRow(dictValue, dictLabel, listClass) {
        //如果为输入框，返回输入框
        if (listClass == "1") {
            return {
                field: dictValue,
                title: dictLabel,
                formatter: function (value, row, index) {
                    if (value == "" || typeof (value) == "undefined") {
                        return '<input type="text" class="inp" name="' + dictValue + '" value="" onblur="changeData(' + index + ', this);" />';
                    } else {
                        return '<input type="text" class="inp" name="' + dictValue + '" value="' + value + '" onblur="changeData(' + index + ', this);" />';
                    }
                }
            }
        }
        //如果为下拉框，返回下拉框
        if (listClass == "2") {
            return {
                field: dictValue,
                title: dictLabel,
                sortable: false,
                formatter: function (value, row, index) {
                    return "<select class='ss' onchange='changeData(" + index + ",this)'  name='" + dictValue + "'>" +
                        "<option  value=''></option>" +
                        "<option id='" + row.id + "' value='5'>优秀</option>" +
                        "<option id='" + row.id + "' value='4.5'>良好</option>" +
                        "<option id='" + row.id + "' value='4'>一般</option>" +
                        "<option id='" + row.id + "' value='3'>待改进</option>" +
                        "<option id='" + row.id + "' value='2'>不合格</option>" +
                        "</select>";
                }
            }
        }
        //否则返回原始数据
        /*return {
            field: dictValue,
            title: dictLabel,
            sortable: false
        }*/
        return {
            field: dictValue,
            title: dictLabel,
            sortable: false,
            formatter: function (value, row, index) {
                return "<select class='ss' onchange='changeData(" + index + ",this)'  name='" + dictValue + "'>" +
                    "<option  value=''></option>" +
                    "<option id='" + row.id + "' value='5'>优秀</option>" +
                    "<option id='" + row.id + "' value='4.5'>良好</option>" +
                    "<option id='" + row.id + "' value='4'>一般</option>" +
                    "<option id='" + row.id + "' value='3'>待改进</option>" +
                    "<option id='" + row.id + "' value='2'>不合格</option>" +
                    "</select>";
            }
        }
    }

    function changeData(index, obj) {
        var value = $(obj).val();
        var name = $(obj).attr('name');
        //通过 index 获取指定的行
        var row = $("#table").bootstrapTable('getOptions').data[index];
        //将 input 的值存进 row 中
        row[name] = value;
        //更新指定的行，调用 'updateRow' 则会将 row 数据更新到 data 中，然后再重新加载
        //$("#table").bootstrapTable('updateRow',{index: index, row: row});
    }

    function saveData(index, field, value) {
        $("#table").bootstrapTable('updateCell', {
            index: index,       //行索引
            field: field,       //列名
            value: value
        })
    }

    //得到表的数据
    function getDate() {
        alert(JSON.stringify($("#table").bootstrapTable('getData')));
        console.log(JSON.stringify($("#table").bootstrapTable('getData')));
    }

    //弹出层提示公告
    function alterTips() {
        /* var tips = $("#noticeTitle").val();
        var noticeValue = $("#noticeValue").text();
        debugger
        if(tips.length>0){
            layer.open({
                  area: ['700px', '450px'],
                  title: "公告标题："+tips,
                  content:noticeValue
                });
        } */

    }

    function uploadFiles(type) {
        var objId = $("#objId").val();
        if (objId != "") {
            $.modal.loading("正在加载数据，请稍后...");
            var url = ctx + "zzjx/projectSysfile/toProjectSysfile?objId=" + objId + "&type=" + type;
            debugger
            var _url = $.common.isEmpty(url) ? "/404.html" : url;
            var _height = ($(window).height() - 250);
            layer.open({
                type: 2,
                maxmin: true,
                shade: 0.3,
                title: '附件上传',
                fix: false,
                area: [950 + 'px', _height + 'px'],
                content: _url,
                shadeClose: false,
                btn: ['<i class="fa fa-close"></i> 关闭'],
                cancel: function () {
                    return true;
                }
            });
            $.modal.closeLoading();
        }
    }

    function loadFiles(type) {
        var objId = $("#objId").val();
        var isUpload = $("#isUpload").val();
        if (type == "A") {
            isUpload = "N";
        }
        if (objId != "") {
            $.modal.loading("正在加载数据，请稍后...");
            var url = ctx + "zzjx/projectSysfile/toloadGrantfile?objId=" + objId + "&type=" + type + "&grant=" + isUpload;
            debugger
            var _url = $.common.isEmpty(url) ? "/404.html" : url;
            var _height = ($(window).height() - 270);
            layer.open({
                type: 2,
                maxmin: true,
                shade: 0.3,
                title: '查看附件',
                fix: false,
                area: [771 + 'px', _height + 'px'],
                content: _url,
                shadeClose: false,
                btn: ['<i class="fa fa-close"></i> 关闭'],
                cancel: function () {
                    return true;
                }
            });
            $.modal.closeLoading();
        }
    }

    function appealfun() {
        var approverId = $("#id").val();
        var roleId = $("#roleId").val();
        $.modal.loading("正在加载数据，请稍后...");
        var url = ctx + "zzjx/appealTab/toAppeal/" + approverId + "/" + roleId;
        debugger
        var _url = $.common.isEmpty(url) ? "/404.html" : url;
        var _height = ($(window).height() - 50);
        layer.open({
            type: 2,
            maxmin: true,
            shade: 0.3,
            title: '申诉管理',
            fix: false,
            area: [1199 + 'px', _height + 'px'],
            content: _url,
            shadeClose: false,
            btn: ['<i class="fa fa-close"></i> 关闭'],
            cancel: function () {
                return true;
            }
        });
        $.modal.closeLoading();
    }
</script>
</body>
</html>	
